<template>
  <view class="oder-page">
    <view class="card">
      <view class="title"> 商品详情 </view>

      <view class="goods-box" v-show="index < show" v-for="(item, index) in commodityList">
        <view class="goods_">
          <commodity :commodityObj="item" :type="'detail'"> </commodity>
        </view>
      </view>

      <view v-if="show < commodityList.length" class="unfold display-s-center" @click="showMore">
        全部展开
        <uni-icons class="icon-down" type="left" size="14"></uni-icons>
      </view>
      <view
        v-if="show >= commodityList.length && show > 2"
        class="unfold display-s-center"
        @click="show = 2"
      >
        收起
        <uni-icons class="icon-down" type="right" size="14"></uni-icons>
      </view>
    </view>

    <view class="order_info">
      <view class="line">
        <view class="label_">订单编号：</view>
        <view class="text">{{ order.sn }} </view>
      </view>
      <view class="line">
        <view class="label">客户名称：</view>
        <view class="text">{{ order.purchaserName }} </view>
      </view>
      <view class="line">
        <view class="label">客户编号：</view>
        <view class="text">{{ order.businessCode }}</view>
      </view>
      <view class="line">
        <view class="label">订单金额：</view>
        <view class="text text_">￥{{ order.goodsPrice }}</view>
      </view>
      <view class="line">
        <view class="label">优惠：</view>
        <view class="text">{{ order.discountPrice || 0 }} </view>
      </view>
    </view>
  </view>
</template>

<script>
import commodity from './components/commodity.vue'
import { getOrderDetail } from '@/api/invoicer'
export default {
  components: { commodity },
  data() {
    return {
      show: 2,
      commodityList: [],
      order: ''
    }
  },
  onLoad(e) {
    uni.setNavigationBarTitle({ title: `${e.title}订单` })
    getOrderDetail(e.sn).then(r => {
      if (r.code === 200) {
        this.order = r.data.order
        this.commodityList = r.data.orderItems
      }
    })
  },
  methods: {
    showMore() {
      this.show = this.commodityList.length
    }
  }
}
</script>

<style lang="scss">
.display {
  display: flex;
}
.display-s-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.oder-page {
  padding: 20rpx 0 40rpx;
  margin: 0 25rpx;
}
.card {
  margin-bottom: 20rpx;
  // padding: 34rpx 25rpx;
  border-radius: 11rpx;
  background-color: #fff;
  .title {
    margin-bottom: 34rpx;
    font-size: 33rpx;
    color: #000000;
    padding: 34rpx 0 0 25rpx;
    border-radius: 11rpx 11rpx 0 0;
  }
  .detail-box {
    .detail {
      padding: 35rpx 0;
      .line-1 {
        margin-bottom: 26rpx;
        .name {
          font-size: 29rpx;
        }
        .tag {
          margin-left: 18rpx;
          text-align: center;
          width: 56rpx;
          height: 28rpx;
          border-radius: 6rpx;
          border: 1px solid #ef231b;
          color: #ef231b;
          font-size: 19rpx;
        }
        .num {
          font-weight: 400;
          font-size: 29rpx;
          color: #8d8d8d;
        }
      }
      .line-2 {
        font-weight: 400;
        font-size: 21rpx;
        color: #8d8d8d;
        line-height: 33rpx;
        .manufacturers {
          margin-bottom: 20rpx;
          width: 400rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          white-space: nowrap;
        }
        .indate {
          margin-bottom: 29rpx;
        }
      }

      .line-3 {
        justify-content: space-between;
        align-items: center;
        .pirce {
          font-weight: 400;
          font-size: 29rpx;
          color: #000000;
        }
        .num {
          font-weight: 400;
          font-size: 25rpx;
          color: #2871fc;
          line-height: 33rpx;
        }
      }
    }
  }
  .unfold {
    height: 97.22rpx;
    font-size: 29rpx;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-top: 1rpx solid #f3f3f3;
    border-radius: 0 0 11rpx 11rpx;
    .icon-down {
      margin-left: 13.89rpx;
      transform: rotate(270deg);
    }
  }
}
.goods_ {
  padding: 0 25rpx;
}
.goods-box {
  border-top: 1rpx solid #f3f3f3;
}
.order_info {
  font-size: 29rpx;
  background: #fff;
  padding: 25rpx;
  .line {
    display: flex;
    margin-top: 34.03rpx;
    line-height: 1;
    .label,
    .label_ {
      width: 160rpx;
    }
    .label {
      color: #8d8d8d;
    }
    .text_ {
      color: #ef231b;
    }
  }
  .line:nth-child(1) {
    margin: 0;
  }
}
</style>
